<template>
  <div class="box">
    <br />
    <el-rwo class="title size"
      >{{ queryParams.cptName }}
      <el-button class="button" type="success" plain>{{
        typeStr
      }}</el-button></el-rwo
    >
    <br />

    <el-row class="title"
      >比赛时间：{{ queryParams.matchTime }} 报名时间：{{
        queryParams.signTime
      }}
      参赛团队：{{ groups }} 参赛运动员：{{ sporters }}
      <div v-if="payType == 2">
        <el-button
          v-if="payStatus != 3 && payStatus != 5"
          type="success"
          class="button"
          round
          @click="verification"
          >核销</el-button
        >
        <div v-else>
          <el-button  type="success" class="button" round>已核销</el-button>
          <el-button v-if="verityStatus==1"  type="warning" @click="auditFN" class="button" round>审核通过</el-button>
          <el-button v-if="verityStatus==1" type="danger" @click="refuseFN" class="button" round>审核拒绝</el-button>
          </div>
        
      </div>
      <div v-if="payType!=2">
        <el-button v-if="verityStatus==1"  type="warning" @click="auditFN" class="button" round>审核通过</el-button>
          <el-button v-if="verityStatus==1" type="danger" @click="refuseFN" class="button" round>审核拒绝</el-button>
          <el-button v-if="verityStatus==2" type="danger" @click="sendBackFN" class="button" round>退回</el-button>
      </div>
    </el-row>

    <!-- 报名费 -->
    <div v-if="queryParams.register?.personInfo?.length > 0">
      <el-row
        ><span class="nav-title">{{ queryParams.register?.name }}</span>
        {{ queryParams.register?.name }}
        {{ queryParams.register?.cost }}元</el-row
      >
      <el-table
        v-loading="loading"
        :data="queryParams.register?.personInfo"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="姓名" prop="name" min-width="120" />
        <el-table-column label="性别" min-width="120">
          <template #default="props">
            <div v-if="props.row.sex == 1">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" prop="idcCode" min-width="120" />
        <el-table-column label="参赛机构" prop="groups" min-width="80" />
        <el-table-column
          label="个人项目"
          prop="personalProject"
          min-width="120"
        >
        <template #default="props">
        <div v-html="props.row.personalProject"/>
      </template>
      </el-table-column>
        <el-table-column label="团体项目" prop="groupProject" min-width="120">
          <template #default="props">
            <div v-html="props.row.groupProject"/>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">共报人数:{{ queryParams.register.counts }}人</div>
        <div class="total">
          合计:{{ (queryParams.register?.total * 1).toFixed(2) }}元
        </div>
      </el-row>

      <br />
    </div>

    <!-- 保险费用 -->
    <div v-if="queryParams.insurance?.insuranceList?.length > 0">
      <el-row
        ><span class="nav-title">{{ queryParams.insurance?.name }}</span>
        {{ queryParams.insurance?.name }}
        {{ queryParams.insurance?.cost }} 元</el-row
      >
      <el-table
        v-loading="loading"
        :data="queryParams.insurance?.insuranceList"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="姓名" prop="name" min-width="120" />
        <el-table-column label="性别" prop="sex" min-width="120">
          <template #default="props">
            <div v-if="props.row.sex == 1">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" prop="idcCode" min-width="120" />
        <el-table-column label="是否购买保险" prop="buyFlag" min-width="80">
          <template #default="props">
            <div>
              <span v-if="props.row.isBuyInsurance != 0">是</span>
              <span v-else>否</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">
          共报人数:{{ queryParams.insurance?.counts }}人
        </div>
        <div class="total">
          合计:{{ (queryParams.insurance?.total * 1).toFixed(2) }}元
        </div>
      </el-row>
      <br />
    </div>

    <!-- 其他费用 -->
    <div v-if="queryParams.other?.personInfo?.length > 0">
      <el-row
        ><span class="nav-title">{{ queryParams.other?.name }}</span>
        {{ queryParams.other?.cost }} 元</el-row
      >
      <el-table v-loading="loading" :data="queryParams.other?.personInfo">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="姓名" prop="name" min-width="120" />
        <el-table-column label="性别" min-width="120">
          <template #default="props">
            <div v-if="props.row.sex == 1">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" prop="idcCode" min-width="120" />
        <el-table-column label="是否有其他费用" prop="buyFlag" min-width="80">
          <template #default="props">
            <div>
              <span v-if="props.row.otherFee >= 0">是</span>
              <span v-else>否</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <br />

      <el-row justify="end">
        <div class="bulletin">共报人数:{{ queryParams.other?.counts }}人</div>
        <div class="total">
          合计:{{ (queryParams.other?.total * 1).toFixed(2) }}元
        </div>
      </el-row>
    </div>
    <br />

    <!-- 兼项费 -->
    <div v-if="queryParams.compatibleFee?.personInfo?.length > 0">
      <el-row
        ><span class="nav-title">{{ queryParams.compatibleFee?.name }}</span>
        {{ queryParams.compatibleFee?.name
        }}{{ queryParams.compatibleFee?.cost }}元</el-row
      >
      <el-table
        v-loading="loading"
        :data="queryParams.compatibleFee?.personInfo"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="姓名" prop="name" min-width="120" />
        <el-table-column label="性别" prop="sex" min-width="120">
          <template #default="props">
            <div v-if="props.row.sex == 1">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column label="证件号码" prop="idcCode" min-width="120" />
        <el-table-column label="兼项名称" prop="projectName" min-width="80" />
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">
          兼项人数:{{ queryParams.compatibleFee?.counts }}人
        </div>
        <div class="total">
          合计:{{ (queryParams.compatibleFee?.total * 1).toFixed(2) }}元
        </div>
      </el-row>
      <br />
    </div>

    <!-- 保证金 -->
    <el-row v-if="queryParams.deposit">
      <span class="nav-title">{{ queryParams.depositName }}</span>
      {{ queryParams.depositName }}
      {{ (queryParams.deposit * 1).toFixed(2) }} 元
    </el-row>
    <br />

    <!-- 队伍报名费 -->
    <el-row v-if="queryParams?.teamFee?.total != 0">
      <span class="nav-title"> {{ queryParams?.teamFee?.name }}</span>
      {{ queryParams?.teamFee?.teamName }}
      {{ (queryParams?.teamFee?.total * 1).toFixed(2) }} 元
    </el-row>
    <br />
    <br />
    <br />

    <el-row justify="end">
      合计: <i class="span">{{ (queryParams.total * 1 || 0).toFixed(2) }}</i> 元
      &nbsp;&nbsp;&nbsp;&nbsp;已支付:
      <i class="span">{{ (queryParams.payment * 1 || 0).toFixed(2) }}</i> 元
    </el-row>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import { orderParticulars, checkCancel } from "@/api/match/review.js";
import { onActivated } from "vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const personId = ref(route.query.personId);
const orderId = ref(route.query.orderId);
const type = ref(route.query.type);
const cptName = ref(route.query.cptName);
const typeStr = ref(route.query.typeStr);
const payType = ref(route.query.payType);
const payStatus = ref(route.query.payStatus);
const sporters = ref(route.query.sporters);
const groups = ref(route.query.groups);
const verityStatus=ref(route.query.verityStatus)
const data = reactive({
  form: {},
  queryParams: {},
});
const { form, queryParams } = toRefs(data);

onActivated(async () => {
  await nextTick();
  personId.value = route.query.personId;
  orderId.value = route.query.orderId;
  type.value = route.query.type;
  cptName.value = route.query.cptName;
  typeStr.value = route.query.typeStr;
  payType.value = route.query.payType;
  payStatus.value = route.query.payStatus;
  sporters.value = route.query.sporters * 1;
  groups.value = route.query.groups * 1;
  console.log(route.query.payStatus);
  initData();
});

onMounted(async () => {
  await nextTick();
  initData();
});
async function initData() {
  form.value.orderId = orderId.value;
  form.value.type = type.value;
  if (!type.value) form.value.type = 0;
  let res = await orderParticulars(form.value);
  queryParams.value = res.data;
  console.log(queryParams.value);
}

// 核销
async function verification() {
  form.value.orderId = orderId.value;
  form.value.flag = "0";
  if (payStatus.value == 6) form.value.flag = "4";
  form.value.payType = route.query.payType;
  form.value.payStatus = route.query.payStatus;
  form.value.verityStatus = route.query.verityStatus;
  let res = await checkCancel(form.value);
  if (res.code == 200) {
    payStatus.value = 3;
    if (verityStatus.value != 4 && verityStatus.value != 3) {
      verityStatus.value = 1
    } 
    proxy.$modal.msgSuccess("操作成功");
  } else {
    proxy.$modal.msgError("操作失败");
  }
  initData();
}

// 审核通过
async function auditFN() {
  let res = await checkCancel({orderId:route.query.orderId,flag:'1'});
  if (res.code == 200) {
    verityStatus.value=2
    proxy.$modal.msgSuccess("操作成功");
  } else {
    proxy.$modal.msgError("操作失败");
  }
  initData();
}

// 审核拒绝
async function refuseFN() {
  let res = await checkCancel({orderId:route.query.orderId,flag:'2'});
  if (res.code == 200) {
    verityStatus.value = 3
    payStatus.value = 6
    proxy.$modal.msgSuccess("操作成功");
  } else {
    proxy.$modal.msgError("操作失败");
  }
  initData();
}

async function sendBackFN() {
  let res = await checkCancel({orderId:route.query.orderId,flag:'3'});
  if (res.code == 200) {
    verityStatus.value = 4
    proxy.$modal.msgSuccess("操作成功");
  } else {
    proxy.$modal.msgError("操作失败");
  }
  initData();
}


</script>

<style scope>
.box {
  padding: 30px;
}
.title {
  display: flex;
  line-height: 35px;
  justify-content: center;
}
.size {
  font-size: 20px;
}
.button {
  margin-left: 30px;
}
.nav-title {
  font-size: 18px;
  margin-right: 30px;
  line-height: -3px;
}
.el-row {
  border: 0;
}
.total {
  margin-left: 30%;
}
.span {
  color: #d9001b;
  line-height: 24px;
  font-weight: 400;
}
</style>
